<template>
    <!-- 财务状况图表 -->
    <div
        style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-top: -50px;
        "
    >
        <!-- 图表容器 -->
        <div ref="chartContainer" style="width: 600px; height: 350px"></div>

        <!-- 年份按钮容器 -->
        <div style="margin-top: -10px; margin-bottom: 20px">
            <button
                v-for="year in years"
                :key="year"
                @click="changeYear(year)"
                :class="{ selected: selectedYear === year }"
            >
                {{ year }}
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref<HTMLDivElement | null>(null)
const years = [2023, 2022, 2021]
const chartData = {
    2023: [0, 5000, 0, 0, 0, 0, 3000, 5000],
    2022: [1000, 4500, 2000, 500, 3000, 1500, 4000, 6000],
    2021: [1500, 4000, 1000, 800, 3500, 2000, 4500, 7000]
}
const selectedYear = ref(2023)

const changeYear = (year: number) => {
    selectedYear.value = year
    updateChart()
}

const updateChart = () => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value)
        const option = {
            title: {
                left: 'center',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                subtextStyle: {
                    fontSize: 12,
                    color: '#555'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b}<br/>金额: {c} 万元'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true // 确保图表区域包含标签空间，避免标签遮挡图表内容
            },
            yAxis: [
                {
                    type: 'category',
                    data: [
                        '品牌推广投入',
                        '研发投入',
                        '机器设备投入',
                        '信息化投入',
                        '贷款金额',
                        '纳税额',
                        '利润总额',
                        '销售收入'
                    ],
                    axisLabel: {
                        fontSize: 12,
                        interval: 0 // 强制显示每一个标签
                    },
                    axisLine: {
                        show: false // 隐藏轴上的刻度
                    }
                }
            ],
            xAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false // 隐藏 X 轴线
                    },
                    axisLabel: {
                        formatter: '{value} 万元',
                        fontSize: 12
                    }
                }
            ],
            series: [
                {
                    name: '销售收入',
                    type: 'bar',
                    data: chartData[selectedYear.value], // 根据年份更新数据
                    barWidth: 15,
                    itemStyle: {
                        color: '#409eff' // 修改图标的颜色
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        valueAnimation: true,
                        fontSize: 14,
                        textStyle: {
                            color: '#ffffff' // 设置标签字体颜色为红色
                        }
                    }
                }
            ]
        }
        myChart.setOption(option)
    }
}

onMounted(() => {
    updateChart()
})
</script>

<style scoped>
#chartContainer {
    position: relative;
}

button {
    margin: 5px;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    background: none;
    /* 移除背景 */
    border: none;
    /* 移除边框 */
    color: #333;
    /* 默认字体颜色 */
}

button.selected {
    color: #409eff;
    /* 修改选中按钮的字体颜色 */
}
</style>
